<template>
  <view class="goodsItem">
    <template v-if="goodsDatail.product_type == 1">
      <view class="scroll_goods_item--common scroll_goods_item_chart" :class="{ hasBorder: itemIndex > 0 }">
        <view class="image_box" @click="onClickGoods()">
          <image lazy-load class="img" mode="aspectFill" :src="`${baseUrl}/images/audi/library/${goodsDatail.images_kv}`">
          </image>
        </view>
        <view class="content_box">
          <view class="content_box_top" @click="onClickGoods()">
            <view class="coupon" v-if="!!goodsDatail.coupon_list && goodsDatail.coupon_list != '[]'">券</view>
            <view class="coupon" v-if="!!goodsDatail.buyers_num_max">团</view>
            <view class="title">{{ goodsDatail.shop_title }}</view>
          </view>
          <view class="price_box">
            <view class="present">￥<text class="price">{{
              goodsDatail.present_price | moneyShow
            }}</text></view>
            <!-- <view class="prepai" v-if="isPrepaidPrice">订金￥{{ isPrepaidPrice | moneyShow }}</view> -->
            <view class="original">￥{{ goodsDatail.original_price | moneyShow }}</view>
            <view class="sell-out" v-if="goodsDatail.shop_num < 1">已售罄</view>
            <view class="btm_box" v-else>
              <u-number-box :min="0" buttonSize="18" :value="goodsDatail.buyNum"
                :max="goodsDatail.limit_num_max ? goodsDatail.limit_num_max : 999"
                v-if="goodsDatail.buyNum && goodsDatail.buyNum > 0" @change="valChange($event, goodsDatail)"
                @overlimit="overlimit">
                <view slot="minus" class="minus btn--common">
                  <view class="sub"></view>
                </view>
                <text slot="input" class="input" style="width: 28px; text-align: center">{{ goodsDatail.buyNum }}</text>
                <view slot="plus" class="plus btn--common"> + </view>
              </u-number-box>
              <view v-else @click.stop="addCars" class="plus btn--common">+</view>
            </view>
          </view>
          <!-- 数字选择框 -->
        </view>
      </view>
      <view class="purchase-limit--common" v-if="goodsDatail.limit_num_max">* 限购{{ goodsDatail.limit_num_max }}个</view>
    </template>
    <template v-else>
      <view class="scroll_goods_item--common scroll_goods_item" :class="{ hasBorder: itemIndex > 0 }">
        <view class="image_box" @click="onClickGoods()">
          <image lazy-load class="img" mode="aspectFill" :src="`${baseUrl}/images/audi/library/${goodsDatail.images_kv}`">
          </image>
        </view>
        <view class="content_box">
          <view class="content_box_top" @click="onClickGoods()">
            <view class="coupon" v-if="!!goodsDatail.coupon_list && goodsDatail.coupon_list != '[]'">券</view>
            <view class="coupon" v-if="!!goodsDatail.buyers_num_max">团</view>
            <view class="title">{{ goodsDatail.shop_title }}</view>
          </view>
          <view class="price_box">
            <view class="present">￥<text class="price">{{
              goodsDatail.present_price | moneyShow
            }}</text></view>
            <!-- <view class="prepai" v-if="isPrepaidPrice">订金￥{{ isPrepaidPrice | moneyShow }}</view> -->
            <view class="original">￥{{ goodsDatail.original_price | moneyShow }}</view>
            <view class="sell-out" v-if="goodsDatail.shop_num < 1">已售罄</view>
            <view class="btm_box" v-else>
              <u-number-box :min="0" buttonSize="18" :value="goodsDatail.buyNum"
                :max="goodsDatail.limit_num_max ? goodsDatail.limit_num_max : 999"
                v-if="goodsDatail.buyNum && goodsDatail.buyNum > 0" @change="valChange($event, goodsDatail)"
                @overlimit="overlimit">
                <view slot="minus" class="minus btn--common">
                  <view class="sub"></view>
                </view>
                <text slot="input" class="input" style="width: 28px; text-align: center">{{ goodsDatail.buyNum }}</text>
                <view slot="plus" class="plus btn--common"> + </view>
              </u-number-box>
              <view v-else @click.stop="addCars" class="plus btn--common">+</view>
            </view>
          </view>
          <!-- 数字选择框 -->
        </view>
      </view>
      <view class="purchase-limit--common purchase-limit" v-if="goodsDatail.limit_num_max">* 限购{{
        goodsDatail.limit_num_max }}个</view>
    </template>
  </view>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  name: 'GoodsItem',
  props: {
    itemIndex: [String, Number],
    goodsDatail: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      value: 3,
      baseUrl: this.$baseUrl
    }
  },
  computed: {
    ...mapState(['loginInfo',]),
    ...mapGetters(['currComInfo']),
    // 是付订金
    isPrepaidPrice() {
      let { prepaid_price } = this.goodsDatail
      if (prepaid_price && prepaid_price != '0') return prepaid_price
      return 0
    },
  },
  methods: {
    onClickGoods() {
      let { id } = this.goodsDatail
      uni.navigateTo({
        url: `/Shop/GoodsDetail?id=${id}&c=${this.currComInfo.id}`
      })

    },
    overlimit(e) {
      uni.$showMsg(`该商品最多只能购买${this.goodsDatail.limit_num_max}个`)
    },
    // 数量选择
    valChange(e, v) {
      this.changeGoodsNub({ goods_id: v.id, num: e.value })
    },
    ...mapMutations([
      'saveGoodsOrder',
      'changeGoodsNub' //更改购物车商品数量
    ]),
    addCars() {
      let currComId = this.currComInfo?.id
      let { id, images_kv, coupon_list, shop_title, present_price, post_service, prepaid_price, company_id,
        buyers_num_max, category_id2, type_name1, limit_num_max, original_price, customer_model
      } = this.goodsDatail

      console.log('present_price :>> ', present_price);
      console.log('prepaid_price :>> ', prepaid_price);
      // 是否券？
      let hasCoupon = false
      if (coupon_list && coupon_list != '[]') {
        hasCoupon = true
      }
      let temp = {
        num: 1,
        state: '',
        images_kv,
        shop_title,
        type_name1,
        coupon_list,
        select: true,
        category_id2,
        goods_id: id,
        limit_num_max,
        buyers_num_max,
        customer_model,
        company_id: currComId,
        coupon: hasCoupon,
        service: post_service,
        origina: original_price,
        company_ids: company_id.split(",").map(Number),
        prepaid_rice: this.isPrepaidPrice ? true : false, // 是否订金
        price: this.isPrepaidPrice ? prepaid_price : present_price,
      }
      this.saveGoodsOrder(temp)
      uni.$showMsg('商品添加购物车成功！')
      let curTime = { curTime: Date.parse(new Date()) }
      uni.setStorageSync('curTime', JSON.stringify(curTime))
    }
  },
}
</script>

<style scoped lang="scss">
@import '@/styles/mixins.scss';

.goodsItem {
  width: 100%;
}

.scroll_goods_item--common {
  width: 100%;
  // margin-top: 20rpx;
  padding-top: 20rpx;
  padding-right: 14rpx;
  box-sizing: border-box;
  overflow: hidden;

  .image_box {
    border-radius: 10rpx;
    overflow: hidden;
    flex-shrink: 0;
    border: 2rpx solid rgba(5, 5, 5, 0.03);

    .img {
      width: 100%;
      height: 100%;
    }
  }

  .content_box {
    position: relative;
    box-sizing: border-box;
    padding: 14rpx 14rpx 10rpx;
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    &_top {
      display: flex;
      align-items: flex-start;

      .coupon {
        margin-top: 6rpx;
        margin-right: 8rpx;
        font-size: 20rpx;
        padding: 0rpx 4rpx;
        border-radius: 8rpx;
        background-color: $theme-color;
        color: #fafafa;
        vertical-align: middle;
      }

      .title {
        @include goods_title(30);
        @include text-ellipsis(2);
      }
    }

    .btm_box {
      position: absolute;
      right: 0;
      bottom: 8rpx;
      padding-right: 6rpx;
      margin-left: auto;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      background-color: #fff;

      .input {
        color: #000;
      }

      .plus {
        background-color: #de4141;
        color: #fafafa;
        padding-bottom: 8rpx;
      }
    }

    .price_box {
      display: flex;
      font-size: 30rpx;
      font-weight: 300;
      color: #222;
      justify-content: flex-start;

      .present {
        font-size: 24rpx;
        font-weight: 500;

        .price {
          font-size: 32rpx;
          font-weight: 500;
          letter-spacing: -0.5px;
          color: #222;
        }
      }

      .original {
        padding-left: 10rpx;
        margin-top: 10rpx;
        font-size: 22rpx;
        letter-spacing: -0.5px;
        text-decoration: line-through;
      }

      .prepai {
        margin-left: 10rpx;
        align-self: center;
        font-size: 24rpx;
        font-weight: 600;
        color: #de4141;
      }

      .sell-out {
        margin-left: auto;
        @include text-tag-light();
      }
    }
  }
}

// 大图
.scroll_goods_item_chart {
  padding-right: 14rpx;

  .image_box {
    width: 100%;
    height: 260rpx;
  }

  .content_box {
    box-sizing: border-box;
    padding: 14rpx 14rpx 10rpx 0rpx;
  }


}

// 模块二样式
.scroll_goods_item {
  display: flex;
  justify-content: space-between;

  .image_box {
    width: 186rpx;
    height: 160rpx;
  }
}

// 下面公共的
.hasBorder {
  border-top: 1px solid #f1f1f1;
  margin-top: 20rpx;
}

// 数字框
.minus {
  color: #333;
  font-weight: 800;
  background-color: #ffffff;
  line-height: 36rpx;
  text-align: center;
  border: #666 solid 1px;
  font-size: 18rpx;
}

.btn--common {
  width: 36rpx;
  height: 36rpx;
  // line-height: 32rpx;
  text-align: center;
  margin-right: 0;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;

  .sub {
    width: 12rpx;
    padding-top: 2rpx;
    display: inline-block;
    border-bottom: #000 solid 1.5px;
  }
}

.purchase-limit--common {
  color: #de4141;
  font-size: 24rpx;
}

.purchase-limit {
  padding-left: 200rpx;
}
</style>
